<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <p v-color="color">{{$a}}</p>
        <p>{{$b}}</p>

        <comp-a></comp-a>
        <comp-b></comp-b>

    </div>
</body>
<script type="module">
    // Vue3
    // 1. Vue  => 全局对象  => {createApp,nextTick,ref,reactive}
    // 2. Vue中对象存有创建引用的方法  var {createApp} = Vue;
    // 3. Vue3的选项式语法中 没有el属性 => 通过app.mount() 指定挂载的元素
    // 4. Vue3的选项式语法中 data是一个返回对象的函数  => 所有的组件均是如此 
    // 5. Vue3中 data methods computed 不在存储在Vue组件(实例)上  => 而是单独存储到一个对象上(代理对象 proxy)  =>  方法中的this默认都指向代理对象  => 取值和赋值都通过代理对象执行
     // 6. Vue3中 全局属性 组件 指令 插件 都是依赖于app定义的


    // console.log(Vue);

    import plugins from "../js/plugins.js"


    let compB = {
        inject: ["x", "y"],
        data() {
            return {

            }
        },
        template: `
            <h2>这是组件b</h2>
            <p>{{x}}</p>
            <p>{{y}}</p>
        `
    }


    var { createApp } = Vue;
    var app = createApp({
        components: {
            compB,
        },
        data() {
            return {
                a: 10,
                color: "red",
            }
        },
        methods: {
            addA() {
                this.a++
            }
        },
        computed: {
            doubleA() {
                return this.a * 2
            }
        },
        watch: {
            a: function (newVal, oldVal) {
                console.log("a发生改变", newVal, oldVal);
            }
        },
        mounted() {
            // console.log("this->代理对象",this);
            // console.log("this->代理对象",this.a);
            // console.log("this->代理对象",this.doubleA);
            // console.log("this->代理对象",this.addA);

            console.log("this->代理对象", this);

            // 访问全局属性/方法
            console.log("this->代理对象", this.$a);
            console.log("this->代理对象", this.$b);
        }
    })

    


    // 自定义插件
    app.use(plugins);


    console.log("app", app);
    app.mount("#app");





</script>



</html>